<template>
  <div>
    <!-- <h2>我是About -- {{ $store.state.count }}</h2>
    <h3>
      计算属性 --- {{ $store.getters.newCount }}
    </h3> -->

    <!-- 辅助函数 -->
    <!-- <h3>
      {{ count }}
    </h3>
    <div>
      {{ list }}
    </div>
    <h3>
      {{ newCount }}
    </h3>
    <button @click="addCount({ count: 88 })">加1</button>
     <button @click="getList">获取数据</button> -->

    <!-- vant时间选择器 -->
    <!-- <van-datetime-picker
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
    /> -->

    <!-- 辅助函数引入modules中数据 -->
    <h2>
      {{ abc }} -- {{ ZnewName }}
    </h2>
    <h2>
      {{ def }}
    </h2>
  </div>
</template>

<script>
// mapState  映射state (放入在computed中)
// mapGetters  映射getters  (放入在computed中)
// mapMutations  映射mutations   (放入在methods中)
// mapActions   映射actions   (放入在methods中)
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  // 映射vuex中的state到当前组件的computed
  // 注意 使用辅助函数，组件内部不要有同名
  // data() {
  //   return {
  //     count: 188
  //   }
  // },
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
    };
  },
  computed: {
    // 辅助函数引入modules中数据
    ...mapState({
      // state ==>  store/index.js 中的state
      'abc': (state) => state.Zhang.name,
      'def': (state) => state.Li.name
    }),
    // ...mapState(["count", "list"]),
    // ...mapGetters(["newCount"]),

    // 辅助函数引入modules中mapGetters  ==>  key后面跟是字符串类型
    ...mapGetters({
      ZnewName: 'Zhang/newName'
    })
  },
  created() {
    this.changeName()
    this.asyncFn()
    // console.log(this.count)
  },
  methods: {
    // 辅助函数引入modules中mapMutations
    ...mapMutations({
      changeName: 'Zhang/changeName'
    }),
    // ...mapMutations(["addCount"]),
    // 辅助函数引入modules中mapActions
    ...mapActions({
      asyncFn: 'Zhang/asyncFn'
    })
    // ...mapActions(["getList"]),
  },
};
</script>

<style>
</style>